

<template>
  <div class="app">
    <h2>shallowRef和shallowReactive</h2>
    <h4>求和为: {{ sum }}</h4>
    <h4>名字为: {{ person.name }}</h4>
    <h4>年龄为: {{ person.age }}</h4>
    <button @click="add">sum+1</button>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <br><br><br><br><br>

    <h4>汽车: {{ car }}</h4>
    <button @click="changeBrand">修改品牌</button>
    <button @click="changeColor">修改颜色</button>
    <button @click="changeEngiee">修改发动机</button>
    <button @click="changeCar">修改整个车</button>
  </div>

</template>

<script setup lang="ts" name="App">
import { ref, shallowRef, reactive, shallowReactive } from 'vue';


let sum = shallowRef(0)
let person = shallowRef({
  name: '张三',
  age: 19
})
// 当关注的事数据的整体,整体替换,shallowref效率比ref高
// .value已经是第一层了
const add = () => {
  sum.value+=1
}

// .value.name 后面的name已经是第二层了
const changeName = () => {
  person.value.name = 'zhangsan'
}

const changeAge = () => {
  person.value.age = 30
}
const changePerson = () => {
  person.value = {
    name: '李四',
    age: 20
  }
}

// 对于car来说， car.brand就是第一层,后续car.options.xx修改不了了
let car = shallowReactive({
  brand: '奔驰',
  options: {
    color: '红',
    engiee: 'v8'
  }
})

const changeBrand = () => {
  car.brand = '大众'
}

const changeColor = () => {
  car.options.color = '黄色'
}

const changeEngiee = () => {
  car.options.engiee = 'v3'
}

const changeCar = () => {
  Object.assign(car, {
    brand: '马自达',
    options: {
      color: '绿',
      engiee: 'vv'
    }
  })
}



</script>

<style scoped>
.app {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  padding: 20px;
}


</style>
